 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页</title>
    <link rel="stylesheet" href="CSS/common.css">
    <link rel="stylesheet" href="CSS/blog_detail.css">
 </head>
 <body>
     <!-- 导航栏 -->
    <div class="nav">
        <img src="./image/蔡徐坤.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 这个便签仅仅用来站位, 把这几个a标签挤到右边 -->
        <div class="spacer"></div>
        <a href="#">主页</a> 
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div> 

    <!-- 页面主体 -->
    <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <!-- 使用这个 .card 表示用户信息 -->
            <div class="card">
                <img src="./image/狗头.jpg" alt="">
                <!-- 用户名 -->
                <h3>北冥有鱼</h3>
                <a href="#">Gitee 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 博客标题 -->
            <h3 class="tatle">我的第一篇博客</h3>
            <!-- 博客发布时间 -->
            <div class="data">2023-11-04</div>
            <!-- 博客正文 -->
            <div class="content">
                <p>
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                </p>
                <p>
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                </p>
                <p>
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                </p>
                <p>
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                    从今天开始我要好好敲代码Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero fugiat ut cum. Delectus, voluptas illum atque laborum velit impedit explicabo enim blanditiis totam unde nulla, perspiciatis itaque voluptatibus rem nam!
                </p>

            </div>
        </div>
    </div>


 </body>
 </html>